import * as React from 'react';
import './arr.scss'
class Jxs extends React.Component{
    
     render() {
        const arr = [
            {
                val:'水果',
                arr :[
                    {val:'香蕉'},{val:'苹果'},{val:'榴莲'}
                ]
            },
            {
                val:'鲜花',
                arr :[
                    {val:'玫瑰'},{val:'牡丹'},{val:'百合'}
                ]
            },
            {
                val:'海鲜',
                arr :[
                    {val:'龙虾'},{val:'鲍鱼'},{val:'乌贼'}
                ]
            },
        ];

        return (
            <div className="c-react-home-wrap react-loop-arr">
                <h2 onClick={()=>{
                    window.location.href='http://10.15.198.18:8090/pages/viewpage.action?pageId=3932983#id-%E3%80%90%E5%88%86%E4%BA%AB%E4%BC%9A1811%E3%80%9109-react%E8%84%9A%E6%89%8B%E6%9E%B6---create-reate-app-7.1%E3%80%81%E6%95%B0%E7%BB%84%E6%B8%B2%E6%9F%93'
                }}>数组渲染</h2>
                <p>前后端交互，最常见的便是渲染后端返回的数组list，前端遍历循环生成dom,显示到页面上。</p>
                <p>现在拿我们最常用的vue与react比较一下不同点：</p>
                <ul>
                    <li>
                        <h4 className="list-title">vue的可以通过指令v-for 对数据循环渲染：</h4>
                        <img src={require('$img/react/loop-vue.png')} alt=""/>
                    </li>
                    <li>
                        <h4 className="list-title">react 是jsx文件，可以直接在Component 执行循环：</h4>
                        <img src={require('$img/react/loop-react.png')} alt=""/>
                    </li>
                </ul>
                <section className="main-box">
                    <h4 className="list-title">循环遍历实例：</h4>
                    <ul>
                        {
                            arr.map((m,i)=>{
                                return (
                                    <li key={i}>
                                        <h4>{m.val}：</h4>
                                        <div>{
                                            m.arr.map((n,ind)=>{
                                                return (
                                                    <span key={ind}>{ind+1}. {n.val}</span>
                                                )
                                            })
                                        }</div>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </section>
            </div>
        );
    }
}

export default Jxs;
